<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form @keyup.enter.native="searchQuery(addForm)" layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备名称">
              <me-dict-select-tag v-model="addForm.id" dictCode="ppgy_ppjzsb,sbmc,id" placeholder="请选择设备名称" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery(addForm)" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- <a-row type="flex" justify="space-around" align="middle">
      <a-col :xl="18" :lg="17" :md="16" :sm="24">
        <div class="height-100">
          <img src="~@/assets/jiazhu.png" class="jzimg">
        </div>
      </a-col> -->
      <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
        <a-list bordered class="height-120">
           <a-list-item>
            <span v-if="newdata.liquidlevel!==undefined && newdata.liquidlevel!==''">井名井号：{{newdata.liquidlevel}}</span>
            <span v-else>井名井号：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.liquidlevel!==undefined && newdata.liquidlevel!==''">加注状态：{{newdata.liquidlevel}}</span>
            <span v-else>加注状态：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.fillingSpeed!==undefined && newdata.fillingSpeed!==''">停泵时间：{{newdata.fillingSpeed}}分钟</span>
            <span v-else>停泵时间：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.fillingMotorFreq!==undefined && newdata.fillingMotorFreq!==''">泵排量：{{newdata.fillingMotorFreq}}L</span>
            <span v-else>泵排量：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.fillingMotorStatus!==undefined && newdata.fillingMotorStatus!==''">加入药剂量：{{newdata.fillingMotorStatus}}L</span>
            <span v-else>加入药剂量：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.agitatorMotorStatus!==undefined && newdata.agitatorMotorStatus!==''">加注水量：{{newdata.agitatorMotorStatus}}L</span>
            <span v-else>加注水量：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.fillingPressure!==undefined && newdata.fillingPressure!==''">状态开始时间：{{newdata.fillingPressure}}</span>
            <span v-else>状态开始时间：暂无数据</span>
          </a-list-item>
          <a-list-item>
            <span v-if="newdata.fillingPressure!==undefined && newdata.fillingPressure!==''">配液时间：{{newdata.fillingPressure}}</span>
            <span v-else>配液时间：暂无数据</span>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row> -->
    <a-row style="margin-top:10px;">
      <!-- <myline title="液位曲线" :mydata="level"/>
    </a-row>
    <a-row style="margin-top:10px;">
      <myline title="加注点击频率曲线" :mydata="fillingMotorFreq"/>
    </a-row>
    <a-row style="margin-top:10px;">
      <myline title="加注电机状态曲线" :mydata="fillingMotorStatus"/>
    </a-row>
    <a-row style="margin-top:10px;">
      <myline title="搅拌电机状态曲线" :mydata="agitatorMotorStatus"/>
    </a-row>
    <a-row style="margin-top:10px;">
      <myline title="加注压力曲线" :mydata="fillingPressure"/> -->
      <a-list item-layout="vertical" size="large">
        <a-list-item style="padding:0px 5px;">
          <myline title="加注状态曲线" :mydata="level"/>
        </a-list-item>
        <a-list-item style="padding:0px 5px;">
          <myline title="泵排量曲线" :mydata="fillingMotorFreq"/>
        </a-list-item>
        <a-list-item style="padding:0px 5px;">
          <myline title="加入药剂量曲线" :mydata="fillingMotorStatus"/>
        </a-list-item>
        <a-list-item style="padding:0px 5px;">
          <myline title="加注水量曲线" :mydata="agitatorMotorStatus"/>
        </a-list-item>
      </a-list>
    </a-row>
  </a-card>
</template>

<script>
import myline from './myline.vue'
import { myGetAction,getAction,getActions,searchList } from '@/api/manage'

export default {
  components:{
    myline
  },
  data() {
    return {
      addForm:{id:null},
      level:[],
      fillingSpeed:[],
      fillingMotorFreq:[],
      fillingMotorStatus:[],
      agitatorMotorStatus:[],
      fillingPressure:[],
      newdata:{}
    }
  },
  created(){
    console.log(this.$route);
    console.log(this.$route.query.ppjzsbId)
    if(this.$route.query.ppjzsbId==undefined){
      this.addForm.id=''
    }else{
      this.addForm.id=this.$route.query.ppjzsbIdid
    }
    this.searchQuery()
  },
  methods: {
    searchQuery(){
      console.log('1212124141')
      console.log(this.addForm.id);
      getAction("/ppgyPpjzztsj/ppgyPpjzztsj/queryBySId", this.addForm.id).then(res => {
        console.log(res)
        // if (res.result.length===0){
        //   console.log('暂无数据')
        //   this.$message.info('暂无数据')
        // }
      })
      // .finally(() => {
      //   console.log("wwwwww");
      // })
      // var ss = setInterval(()=>{
      //   searchList("/znjzfstatus/znjzFillingStatus/queryByEId", this.addForm.equipmentId).then(res => {
      //     console.log(res)
      //     if (res.result.length===0){
      //       console.log('暂无数据')
      //       this.$message.info('暂无数据')
      //     }else{
      //       res.result.map((item,index)=>{
      //         this.level.push({'value':item.liquidlevel,'time':item.time})
      //         this.fillingSpeed.push({'value':item.fillingSpeed,'time':item.time})
      //         this.fillingMotorFreq.push({'value':item.fillingMotorFreq,'time':item.time})
      //         this.fillingMotorStatus.push({'value':item.fillingMotorStatus,'time':item.time})
      //       this.agitatorMotorStatus.push({'value':item.agitatorMotorStatus,'time':item.time})
      //         this.fillingPressure.push({'value':item.fillingPressure,'time':item.time})
      //       })
      //       this.newdata=res.result[res.result.length-1]
      //     }
      //     console.log(res)
      //     console.log(this.level)
      //     console.log(this.newdata)
      //     // this.totles = this.formatGpData(res.result)
      //     if(this.$route.path !== '/znjzstatus'){
      //       clearInterval(ss)
      //     }
      //   })
      // },30000)
      if(this.addForm.id === undefined || this.addForm.id === ""){
        this.level=[],
        this.fillingMotorFreq=[],
        this.fillingMotorStatus=[],
        this.agitatorMotorStatus=[]
      }else{
        this.level=[
          {time:"2021-12-14 18:25:01",value:1},
          {time:"2021-12-14 18:25:02",value:1},
          {time:"2021-12-14 18:25:03",value:1},
          {time:"2021-12-14 18:25:04",value:1},
          {time:"2021-12-14 18:25:05",value:0},
          {time:"2021-12-14 18:25:06",value:1},
          {time:"2021-12-14 18:25:07",value:1}
        ],
        this.fillingMotorFreq=[
          {time:"2021-12-14 18:25:01",value:2.4},
          {time:"2021-12-14 18:25:02",value:2.4},
          {time:"2021-12-14 18:25:03",value:2.4},
          {time:"2021-12-14 18:25:04",value:2.4},
          {time:"2021-12-14 18:25:05",value:0},
          {time:"2021-12-14 18:25:06",value:2.4},
          {time:"2021-12-14 18:25:07",value:2.4}
        ],
        this.fillingMotorStatus=[
          {time:"2021-12-14 18:25:01",value:30},
          {time:"2021-12-14 18:25:02",value:30},
          {time:"2021-12-14 18:25:03",value:30},
          {time:"2021-12-14 18:25:04",value:30},
          {time:"2021-12-14 18:25:05",value:0},
          {time:"2021-12-14 18:25:06",value:30},
          {time:"2021-12-14 18:25:07",value:30}
        ],
        this.agitatorMotorStatus=[
          {time:"2021-12-14 18:25:01",value:30},
          {time:"2021-12-14 18:25:02",value:30},
          {time:"2021-12-14 18:25:03",value:30},
          {time:"2021-12-14 18:25:04",value:30},
          {time:"2021-12-14 18:25:05",value:0},
          {time:"2021-12-14 18:25:06",value:30},
          {time:"2021-12-14 18:25:07",value:30}
        ]
      }  
    },
    searchReset(){
      console.log('qwfiuaiu')
      this.addForm.id=''
      this.searchQuery()
    }
  }
}
</script>


<style>
.height-100{
  height:277px;
  /* line-height: 100px; */
}
.jzimg{
  background-size: cover;
  height: 100%;
  width: 100%;
  padding:0px 5px;
}
.height-130{
  height: 450px;
  overflow-y: scroll;
}
</style>